<template>
  <main class="el-main">
    <a-layout>
      <a-layout-header id="header">
        <div id="head-left">
          <router-link
            to="/"
            style="display: flex; justify-content: center; align-items: center"
          >
            <HomeFilled
              :style="{ fontSize: '26px' }"
              id="home-icon"
            />
          </router-link>
          <div id="head-text">开课管理</div>
        </div>
        <LogoutOutlined
          :style="{ fontSize: '22px' }"
          id="logout-icon"
        />
      </a-layout-header>
    </a-layout>
    <div :style="{ padding: '50px', background: '#fff', minHeight: '360px' }">
      <el-steps
        :active="active"
        finish-status="success"
        style="margin-bottom: 3vh;"
        align-center
      >
        <el-step title="基地基本信息" />
        <el-step title="配置课程信息" />
        <el-step title="配置开课信息" />
      </el-steps>

      <div v-if="active === 0">
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 区域中文</div>
              <el-select
                v-model="area"
                class="m-2"
                placeholder="Select"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in areas"
                  :key="item"
                  :label="item"
                  :value="item"
                  @click="getBaseInfo(item)"
                />
              </el-select>
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 培训基地</div>
              <el-select
                class="m-2"
                placeholder="Select"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in trainingBases"
                  :key="item.no"
                  :label="item.trainingBase"
                  :value="item.trainingBase"
                  @click="setBaseInfo(item)"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 基地代码</div>
              <el-input
                v-model="selectTrainingBase.no"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
                disabled
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 基地管理员</div>
              <el-input
                v-model="selectTrainingBase.personId"
                disabled
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div>培训地点</div>
              <el-input
                v-model="selectTrainingBase.address"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
                disabled
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div>基地描述</div>
              <el-input
                v-model="selectTrainingBase.describe"
                disabled
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col
            :offset="15"
            :span="10"
          >
            <button
              id="button"
              @click="next()"
            >下一步</button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 1">
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 课程名--中文</div>
              <el-input
                v-model="classInfo.name"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 课程属性</div>
              <el-input
                v-model="classInfo.category"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 课程标题--中文</div>
              <el-input
                v-model="classInfo.title"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 生效标识</div>
              <el-input
                v-model="classInfo.enable"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 课程描述</div>
              <el-input
                v-model="classInfo.description"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
              />
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col
            :offset="2"
            :span="10"
            @click="goback()"
          >
            <button id="button2">上一步</button>
          </el-col>
          <el-col
            :span="10"
            @click="next()"
          >
            <button id="button">下一步</button>
          </el-col>
        </el-row>
      </div>
      <div v-if="active === 2">
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 区域中文</div>
              <el-input
                v-model="area"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
                disabled
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 培训基地</div>
              <el-input
                v-model="trainingBase"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
                disabled
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 期数</div>
              <el-input
                v-model="classInfo.Periods"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div> * 课程名称</div>
              <el-input
                v-model="classInfo.name"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
                disabled
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div> * 导师</div>
              <el-input
                v-model="classInfo.teacherId"
                class="w-50 m-2"
                :prefix-icon="PriceTag"
              />
            </el-col>
          </el-row>
        </div>
        <div style="margin-bottom: 3vh;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div>课程开始时间</div>
              <el-date-picker
                v-model="classInfo.startTime"
                type="date"
                style="width: 100%;"
              />
            </el-col>
            <el-col
              :span="10"
              :offset="3"
            >
              <div>课程结束时间</div>
              <el-date-picker
                v-model="classInfo.endTime"
                type="date"
                style="width: 100%;"
              />
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col
            :offset="2"
            :span="10"
            @click="goback()"
          >
            <button id="button2">上一步</button>
          </el-col>
          <el-col
            :span="10"
            @click="openClass()"
          >
            <button id="button">完成</button>
          </el-col>
        </el-row>
      </div>
    </div>
    <a-layout-footer style="text-align: center">
      Front Third Group ©2023
    </a-layout-footer>
  </main>

</template>
  
  <script setup>
import { ref, reactive } from "vue";
import { PriceTag } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import axios from "axios";

import {
  //跳转至主页
  HomeFilled,
  LogoutOutlined,
} from "@ant-design/icons-vue";



const active = ref(0);
const area = ref("");
const selectTrainingBase = ref({});
const areas = ref(["上海", "杭州"]);
const trainingBases = ref([]);

const classInfo = reactive({
  baseId: 0,
  Periods: "",
  teacherId: "",
  startTime: "",
  endTime: "",
  name: "",
  category: "",
  title: "",
  description: "",
  enable: ""
});

const next = () => {
  if (active.value++ > 2) active.value = 0;
};

const goback = () => {
  if (active.value-- < 0) active.value = 0;
};

const getBaseInfo = async (area) => {
  const res = await axios.get(
    `/api/Base/GetBaseInfoByArea?area=${area}`
  );
  trainingBases.value = [];
  res.data.forEach((element) => {
    trainingBases.value.push(element.baseInfo);
  });
};

const setBaseInfo = (item) => {
  selectTrainingBase.value = item;
};

const openClass = async () => {
  classInfo.baseId = selectTrainingBase.value.no;
  const res = await axios.post(
    "/api/Course/AddCourse",
    classInfo
  );
  const data = res.data;
  if (data.status === "Success") {
    ElMessage({
      message: data.msg,
      type: "success",
    });
  } else {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
};
</script>
  

  <style scoped>
#head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 3;
}


#button {
  height: 30px;
  width: 50%;
  border: none;
  color: white;
  background-color: rgb(0, 145, 17);
  font-weight: bold;
}

#button2 {
  height: 30px;
  width: 80%;
  border: none;
  color: white;
  background-color: rgb(0, 70, 145);
  font-weight: bold;
}

.el-main {
  --el-main-padding: 20px;
  display: block;
  flex: 3;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
}

.red-star {  
  color: red;  
  font-weight: bold;  
  font-size: 20px;  
}

</style>